<style scoped lang="less">
	.demonstration{
		margin-right:15px;
		margin-left:15px;
	}
	.vipmassge{
		margin-right:15px ;
	}
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	h3{
		
		margin-bottom: 20px;
		
		
	}
	.item1,.item2{
		display: flex;
		flex-wrap: wrap;
	}
	.el-table{
		width: 100vh;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.tableclass{
		display: flex;
		margin-top: 10px;
		margin-left: 30px;
		font-size: 16px;
		font-weight: 700;
		p{
			margin-right: 20px;
		}
	}
	.el-table .cell{
		text-align: center !important;
	}
	ul{
		// margin-top: 20px;
		margin-left: 30px;
		list-style: none;
		li{
			margin-top: 20px;
			display: flex;
			align-items: center;
		}
	}
	img{
		width: 25px;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
</style>
<template>
	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			 <h3>
			 	退款维权
			</h3>
			<div class="item1">
				<el-form-item label="退款编号" label-width="90">
					<el-input
						placeholder="请输入退款编号"
						v-model="backcode"
					>	
					</el-input>
				</el-form-item>
				
			 	<el-form-item label="申请时间" label-width="90">
					<el-date-picker
						v-model="backStartTime"
						type="date"
						placeholder="开始时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						style="width: 130px"
					/>-
					<el-date-picker 
						v-model="backEndTime"
						type="date"
						placeholder="结束时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						style="width: 130px"
					/>
				</el-form-item>
			 	<el-button
			 	type="primary"
				@click="searchback"
			 	>搜索</el-button>
			 	<el-button
			 	type="plain"
				@click="replay"
			 	>重置</el-button>
			</div>
		
			<el-tabs v-model="activeName" class="demo-tabs" @click="goType(activeName)">
			   <el-tab-pane label="全部"></el-tab-pane>
			   <el-tab-pane label="维权结束" name="维"></el-tab-pane>
			   <el-tab-pane label="买家待退货" name="退"></el-tab-pane>
			   <el-tab-pane label="卖家待收货" name="收"></el-tab-pane>
			   <el-tab-pane label="卖家拒绝" name="拒"></el-tab-pane>
			 </el-tabs>
			 
			<el-table :data="tableData" style="width: 100%" height="50vh">
			    <el-table-column type="selection" width="40" @select-all="handleSelectAll" @select="handleSelect"></el-table-column>
			    <el-table-column prop="back_num" label="退款编号"></el-table-column>
				<el-table-column label="商品信息">
					<template #default="image">
						<img :src="downloadUrl+image.row.goods_image" class="avatar" />
						{{image.row.goods_name}}
					</template>
				</el-table-column>
				<el-table-column label="商品金额" width="100">
					<template #default="{ row }">
						￥{{row.price_value}}
					</template>
				</el-table-column>
				<el-table-column label="实付金额">
					<template #default="{ row }">
						￥{{row.price_cost}}
					</template>
				</el-table-column>
				<el-table-column prop="user_name" label="买家"></el-table-column>
				<el-table-column prop="back_value" label="退款金额" width="100"></el-table-column>
				<el-table-column prop="pay_method" label="退款方式"></el-table-column>
				<el-table-column prop="start_time" label="申请时间"></el-table-column>
				<el-table-column prop="back_status_name" label="退款状态"></el-table-column>
				<el-table-column label="操作" width="140">
					<template #default="{ row }">
						<a class="mya" @click="refundDetail(row)">详情</a>
						<a class="mya" @click="refundnode(row)">备注</a>
					</template>
				</el-table-column>
			</el-table>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				></el-pagination>
			<el-dialog v-model="dialogFormVisible1" title="退款详情" width="400">
			    <el-form style="height: 400px;">
			      <el-form-item >
					<ul>
						<li><span>退款人：</span>{{refundperson}}</li>
						<li><span>退款商品名称：</span><span>{{refundgoods}}</span></li>
						<li><span>退款金额：</span><span>{{refundpice}}</span></li>
						<li><span>退款申请时间：</span><span>{{refundstarttime}}</span></li>
						<li><span>退款申请结束时间：</span><span>{{refundendtime}}</span></li>
						<li><span>退款状态：</span><span>{{refundstatus}}</span></li>
						<li><span style="width: 45px;">备注：</span><span>{{refundnot}}</span></li>
					</ul>
			      </el-form-item>
			    </el-form>
			  </el-dialog>
			
			<el-dialog v-model="dialogFormVisible2" title="退款备注" width="400">
			    <el-form style="height: 150px;">
			      <el-form-item >
						<el-input
						type="textarea"
						:rows="4"
						v-model="redundnodevalue"
						></el-input>
			      </el-form-item>
			    </el-form>
				<template #footer>
				  <div class="dialog-footer">
				    <el-button type="primary" @click="nodesure">
				      确定
				    </el-button>
					<el-button @click="dialogFormVisible2=false">
					  取消
					</el-button>
				  </div>
				</template>
			  </el-dialog>
				
		 </el-main>
	   </el-container>
	 </div>
</template>
<script setup>
import Header from '@/components/Header.vue'
import { ref,reactive,onMounted} from 'vue'
import {Search,Lock,Calendar} from '@element-plus/icons-vue'
import {
		getRefundlist,
		searchRefundlist,
		Refunddetail,
		Refundnode,
		updateRefundnode,
		addRefund
		
	} from "@/api";
import { downloadUrl,baseUrl } from "@/utils/request";
import { ElMessage } from 'element-plus'
let pageIndex=ref(1);
let pageSize=5;
let total=ref(0)
let tableData = ref([])
let backcode=ref()
let timevalue=ref('')
//获取退款列表
const getbackpay = async () => {
		let res = await getRefundlist({	
			pageIndex: pageIndex.value,
			pageSize: pageSize,
		})
		tableData.value = res.backList;
		//处理时间
		tableData.value.forEach((v)=>{
			v.start_time = v.start_time.replace("T"," ")
		
		})
		total.value = res.pageCount;
		//console.log(res)
	}
//切换退款列表类型
const dataArr=[]
const activeName = ref()
const goType = async (a) => {
	tableData.value=[];
	 //console.log(Number(a))
	let res = await getRefundlist({
		pageIndex: pageIndex.value,
		pageSize: pageSize,
		"backStatus":a 
	})
	if(a=="拒"){
		var filterData=res.backList.filter(x=>x.back_status_name=="货物退回申请拒绝")
		dataArr.push(filterData)
		tableData.value = dataArr[0]
		// console.log(tableData.value);
	}else if(a=="维"){
		var filterData=res.backList.filter(x=>x.back_status_name=="维权结束")
		dataArr.push(filterData)
		tableData.value = dataArr[0]
		// console.log(tableData.value);
	}else{
		tableData.value = res.backList
		total.value = res.pageCount
	}
	//console.log(res);
}

//搜索退款列表
let backStartTime = ref("")
let backEndTime=ref("")
const searchback = async () => {
	let res = await searchRefundlist({	
		pageIndex: pageIndex.value,
		pageSize: pageSize,
		backNum: Number(backcode.value) ,
		backStartTime: backStartTime.value,
		backEndTime:backEndTime.value
	})
		tableData.value = res.backList;
		//处理时间
		tableData.value.forEach((v)=>{
			v.start_time = v.start_time.replace("T"," ")
		
		})
		total.value = res.pageCount;
		//console.log("搜索",res)
	}
	onMounted(() => {
		getbackpay()
	})

// //获取分页
const changePage=(page)=>{
	// console.log(page)
	pageIndex.value=page;
	searchback()
}
const dialogFormVisible1=ref(false)
const dialogFormVisible2=ref(false)
const refundperson=ref('')
const refundgoods=ref('')
const refundpice=ref('')
const refundstarttime=ref('')
const refundendtime=ref('')
const refundstatus=ref('')
const refundnot=ref('')
const refundDetail=async (row)=>{
	dialogFormVisible1.value=true
	let res = await Refunddetail({
		backId: row.back_id,
		backNotes: row.back_notes,
	})
	
	//console.log(res);
	  refundperson.value=res[0].user_name
	  refundgoods.value=res[0].goods_name
	  refundpice.value=res[0].price_cost
	  refundstarttime.value=res[0].start_time.replace("T"," ")
	  refundendtime.value=res[0].end_time
	  refundstatus.value=res[0].back_status_name
	  refundnot.value=res[0].back_notes
}
const redundnodevalue=ref('')
//备注
const refundnode=async(row)=>{
	dialogFormVisible2.value=true
	let res = await Refundnode ({
		backId: row.back_id
	})
	// console.log("备注",res);
	redundnodevalue.value=res[0].back_notes
	sessionStorage.setItem("refundnode",row.back_id)
}
//备注中的确定
const nodesure=async ()=>{
	let res = await updateRefundnode ({
		backId: sessionStorage.getItem("refundnode"),
		backNotes:redundnodevalue.value
	})
	//console.log(res);
	if(res == "更新成功"){
		ElMessage.success({
			message:"修改成功"
		})
	}else{
		ElMessage.error({
			message:"修改失败"
		})
	}
	dialogFormVisible2.value=false
}


const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  }
]

    const selectedItems = ref([]);
    const handleSelectAll = (selection) => {
      selectedItems.value = selection;
    };
    const handleSelect = (selection, row) => {
      selectedItems.value = selection;
    };
	const replay=()=>{
		
		backcode.value=''
		getbackpay()
	}
</script>
